<template>
    <div style="display: flex;">
    <el-menu class="menu" router text-color="#000" :default-active="activeIndex.toString()" >
                <el-menu-item index="/home/calculator/retireAge">
                    <el-icon class="retireAge"></el-icon>退休年龄计算器
                </el-menu-item>
                <el-menu-item index="/home/calculator/retireMoney">
                    <el-icon class="retireMoney"></el-icon>
                    退休金计算器</el-menu-item>
            </el-menu>
            <RouterView/>
        </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const activeIndex = ref(route.path); // 初始化为当前路由路径
watch(
  () => route.path,
  (newPath) => {
      activeIndex.value = newPath;
  }
);
</script>
<style scoped>
.menu {
    border: 0cap; 
    background-color: #fcfcfc;
    width: 15%;
    min-height: 100vh;
}
.menu .el-menu-item.is-active {/*  选中颜色 */
  background: #cce3f4 !important;
  color: black !important;
}
.menu .el-menu-item:hover {
  background: #cce3f4 !important;
  color: black !important;
}
.retireAge {
    width: 18px;
    height: 18px;
    background: url('@/assets/picture/retireAge.png') no-repeat center center;
    background-size: contain;
}
.retireMoney {
    width: 18px;
    height: 18px;
    background: url('@/assets/picture/retireMoney.png') no-repeat center center;
    background-size: contain;
}
</style>